<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <script src="js/go.js" type="text/javascript"></script>
        <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="js/jspdf.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="myDiagramDiv" style="width: 900px; height: 900px">
            
            <img src="">
        </div>
        <button onclick="asd();">dame click</button>
        <script type="text/javascript">
            /* var $1 = go.GraphObject.make;
             var diagram = new go.Diagram("myDiagramDiv");
            diagram.add(
                $1(go.Part,
                  $1(go.Picture, "")
                ));
                function asd(){
                    var doc = new jsPDF("landscape");
                    
                    var img=$("img").attr("src");//x y ancho alto
                    doc.addImage(img, 'JPEG', 10, 10, 275, 190, 'monkey'); 
                    
                    
                    doc.output('datauri');
                }*/
           
    
            var $ = go.GraphObject.make;
            var diagram = $(go.Diagram, "myDiagramDiv",{
                initialContentAlignment: go.Spot.Center,
                initialAutoScale: go.Diagram.Uniform,
                maxSelectionCount: 1,
                allowCopy: false,
                "undoManager.isEnabled": true,
                layout:
                $(go.TreeLayout,
                {
                    angle: 90,
                    layerSpacing: 180,
                    alternateAngle: 90,
                })
            });
            diagram.groupTemplate =
            $(go.Group, "Auto",
                    $(go.Shape, "RoundedRectangle",
                      { fill: "red" }),
                    $(go.Panel, "Vertical", 
                    $(go.TextBlock,     
                        { font: "Bold 12pt Sans-Serif" },
                        new go.Binding("text", "key")),
                      $(go.Placeholder,  
                        { padding: 5, background: "#ACCB5E" })
                    )
                  );
            
            


                  var nodeDataArray = [
                    { key: "Alpha" ,parent: "Omega"},
                    { key: "Omega", isGroup: true },
                    { key: "Beta", group: "Omega" },
                    { key: "Gamma", group: "Omega" },
                    { key: "Epsilon", group: "Omega"},
                    { key: "Zeta", group: "Omega" },
                    { key: "Delta" }
                  ];
                  var linkDataArray = [
                    { from: "Alpha", to: "Omega" }, // from a Node to the Group
                    { from: "Beta", to: "Gamma" },  // this link is a member of the Group
                    { from: "Beta", to: "Epsilon" },  // this link is a member of the Group
                    { from: "Gamma", to: "Zeta" },  // this link is a member of the Group
                    { from: "Epsilon", to: "Zeta" },  // this link is a member of the Group
                    { from: "Omega", to: "Delta" }  // from the Group to a Node
                  ];
                  diagram.model = new go.TreeModel(nodeDataArray);
                  //diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
        </script>
    </body>
</html>
